<template>
  <div class="field-setter">
    <div class="field-list" v-for="(item, index) in _value" :key="item.field">
      <q-select v-model="item.fieldId" placeholder="选择字段">
        <q-option
          v-for="option in fields"
          :key="option.id"
          :label="option.label"
          :value="option.id"
        />
      </q-select>
      <div class="rule"></div>
      <q-select v-model="item.ruleId" placeholder="选择规则">
        <q-option
          v-for="option in rules"
          :key="option.id"
          :label="option.label"
          :value="option.id"
        />
      </q-select>

      <q-button
        type="text"
        title="删除"
        danger
        class="delete"
        @click="handleDeleteRow(index)"
      >
        <!-- <qx-icon name="mtms-delete" :follow="true" theme="filled" /> -->
        <i class="q-icon-delete"></i>
      </q-button>
    </div>
    <q-button type="text" class="add-style" @click="handleAddRow">
      添加
    </q-button>
  </div>
</template>

<script >
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
  name: 'DesensitizationFieldSetter',
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    onChange: {
      type: Function,
      default: () => {},
    },
  },
  setup(props) {
    const fields = [
      {
        id: '1',
        label: '字段1',
      },
      {
        id: '2',
        label: '字段2',
      },
    ];
    const rules = [
      {
        id: '1',
        label: '规则1',
      },
      {
        id: '2',
        label: '规则2',
      },
    ];
    const _value = props.value;
    const handleAddRow = () => {
      _value.push({
        fieldId: '',
        ruleId: '',
      });
      props.onChange(_value);
    };
    const handleDeleteRow = (index) => {
      _value.splice(index, 1);
      props.onChange(_value);
    };
    return {
      fields,
      rules,
      _value,
      handleAddRow,
      handleDeleteRow,
    };
  },
});
</script>
<style lang="scss" scoped>
.field-setter {
  .field-list {
    display: flex;
    margin-bottom: 8px;
    .rule {
      margin: 0 10px;
    }
    .delete {
      margin-left: 8px;
    }
  }
  .q-select {
    width: 100px;
  }
}
</style>
